<template>
  <div class="tabs">
    <div class="tabs-bar">
      <div
        v-for="(pane, index) in panes"
        :key="pane.name"
        :class="['tabs-tab', { 'tabs-tab-active': activeName === pane.name }]"
        @click="handleTabClick(pane.name)"
      >
        {{ pane.label }}
      </div>
    </div>
    <div class="tabs-content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Tabs',
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      activeName: this.value,
      panes: []
    };
  },
  watch: {
    value(newVal) {
      this.activeName = newVal;
    },
    activeName(newVal) {
      this.$emit('input', newVal);
    }
  },
  mounted() {
    this.$children.forEach(child => {
      if (child.$options.name === 'TabPane') {
        this.panes.push(child);
      }
    });
  },
  methods: {
    handleTabClick(name) {
      if (this.activeName !== name) {
        this.activeName = name;
      }
    }
  }
};
</script>

<style scoped lang="scss">
.tabs {
  border-bottom: 1px solid #dcdcdc;
}
.tabs-bar {
  display: flex;
  margin-bottom: -1px;
}
.tabs-tab {
  padding: 12px 20px;
  cursor: pointer;
  position: relative;
  user-select: none;
}
.tabs-tab-active {
  color: #409eff;
  border-bottom: 2px solid #409eff;
}
.tabs-content {
  padding: 16px;
}
</style>